<template>
    <div class="perview" v-if="isshow">
        <span @click="isshow = false" class="close">×</span>
        <img :src="preview_path" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            isshow: false,
            preview_path: ''
        }
    },
    methods: {
        show_preview(_path) {
            this.preview_path = _path
            this.isshow = true
        }
    },
};
</script>

<style lang="less" scoped>
@import '../assets/Less/common.less';

.perview {
    .position(fixed, 0, 0, 0, 0);
    background-color: black;
    z-index: 1;
    .flex();

    img {
        width: 100%;
    }

    .close {
        color: #fff;
        .position(absolute, 10px, 0, 10px, 0);
        font-size: 50px;
    }
}
</style>